<template>
    <div class="container">
        <div class="departNav">
            <h3 class="font16">科室</h3>
            <p class="font12" @click="toDepartAll">全部科室</p>
        </div>
        <div class="content_scroll">
            <div class="scroll">
                <div class="one" v-for="item in departLs" :key="item._id" @click="toDepartItem(item.text)">
                    <img src="../../assets/official/u6431.png" alt="" style="width: 32px">
                    <p>{{ item.text }}</p>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';

let router = useRouter();
let route = useRoute();
let departLs: any = ref([])


onMounted(() => {
    getDepart()
})

const getDepart = async () => {
    let { data: { depart } } = await axios.get('http://localhost:3000/childLs')
    console.log(depart)
    departLs.value = depart
}


const toDepartAll = () => {
    router.push({
        path: '/departAll',
    })
}
const toDepartItem = (text: string) => {
    router.push({
        path: '/departAllDetail',
        query: {
            text: text
        }
    })
}

</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
    width: 0px;
}

.departNav {
    display: flex;
    justify-content: space-between;
    padding: 16px;
    box-sizing: border-box;
}

.content_scroll {
    padding: 0 16px;

    .scroll {

        height: 70px;

        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;

        .one {
            width: 100px;
            display: inline-block;
            text-align: center;
            font-size: 12px;
            color: #333333;
        }
    }
}
</style>